<template>
    <div>

        <el-row>
            <!-- 添加 -->
        <el-button type="text" @click="dialogFormVisible1 = true">
            <el-button type="primary" round>添加部门</el-button>
        </el-button>

        <el-dialog title="" :visible.sync="dialogFormVisible1">
        <el-form :model="form">
            <el-form-item label="部门名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" ></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="add()" v-model="dialogFormVisible1">确 定</el-button>
        </div>
        </el-dialog>


            <!-- 修改 -->
            <!-- <el-input placeholder="请输入部门编号" v-model="input1">
                <template slot="prepend">更新部门</template>
            </el-input> -->

        <el-button type="text" @click="dialogFormVisible2 = true">
            <el-button type="primary" round>修改部门</el-button>
        </el-button>

        <el-dialog title="" :visible.sync="dialogFormVisible2">
        <el-form :model="form">
            <el-form-item label="部门编号" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="部门名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" ></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="update()" v-model="dialogFormVisible2">确 定</el-button>
        </div>
        </el-dialog>       

        </el-row>  



        <!-- 删除 -->
        <el-button type="text" @click="dialogFormVisible = true">
            <el-button type="primary" round >删除部门</el-button>
        </el-button>

        <el-dialog title="" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="编号" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off" ></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="remove()" v-model="dialogFormVisible">确 定</el-button>
        </div>
        </el-dialog>

    </div>
</template>

<script>
import { del, post, put } from '../../utils/request';
export default {
    data(){
        return{
            input1:'',
            labelPosition: 'right',

            dialogFormVisible1: false, // 添加
            dialogFormVisible: false, // 删除
            dialogFormVisible2: false, // 修改
            form: {
                name: '',
                delivery: false,
                type: [],
                id:'',
            },
            formLabelWidth: '120px'
            };
    },
    methods:{
        // 删除部门
        remove(){
            del("/v1/workers/department/"+(this.form.id)+'/')
            .then((res) => {
                console.log(this.form.name)
                console.log("删除成功", res)
                this.dialogFormVisible = false
            }).catch((err) => {
                console.log(err)
            });
        },
        // 添加部门信息
        add(){
            post("/v1/workers/department/", {name:this.form.name})
            .then((res) => {
                console.log("添加部门信息成功", res)
                this.dialogFormVisible1 = false
            }).catch((err) => {
                console.log(err)
            });
        },
        // 修改部门信息
        update(){
            put("/v1/workers/department/"+ this.form.id + '/', {name:this.form.name})
            .then((res) => {
                console.log("修改成功", res)
                this.dialogFormVisible2 = false
            }).catch((err) => {
                console.log(err)
            });
        }
    }

}
</script>

<style>

</style>